<template>
  <div class="input">
    <fx-card title="基础用法">
      <fx-input class="mr10" v-model="baseInput" placeholder="请输入内容" :debounce="debounce*1000"/>
      防抖延时：
      <fx-input-number v-model="debounce" :min="0" :max="5" width="120"/>
      秒后触发
      <p class="text_hide mt10">当前输入: {{ baseInput }}</p>
      <template #hide>
        <pre v-highlight="base"><code class="vue"></code></pre>
      </template>
    </fx-card>
    <fx-card title="禁用状态">
      <fx-input class="mr10" v-model="disabledInput" disabled placeholder="请输入内容"></fx-input>
      <template #hide>
        <pre v-highlight="disabled"><code class="vue"></code></pre>
      </template>
    </fx-card>
    <fx-card title="限制输入长度">
      <fx-input class="mr10" v-model="lengthInput" :length="10" placeholder="请输入内容"></fx-input>
      <p class="text_hide mt10">当前输入: {{ lengthInput }}</p>
      <template #hide>
        <pre v-highlight="length"><code class="vue"></code></pre>
      </template>
    </fx-card>
    <fx-card title="可清空">
      <fx-input class="mr10" v-model="clearInput" clear placeholder="请输入内容"></fx-input>
      <template #hide>
        <pre v-highlight="clear"><code class="vue"></code></pre>
      </template>
    </fx-card>
    <fx-card title="圆角">
      <fx-input class="mr10" v-model="roundInput" round placeholder="请输入内容"></fx-input>
      <template #hide>
        <pre v-highlight="round"><code class="vue"></code></pre>
      </template>
    </fx-card>
    <fx-card title="密码框">
      <fx-input class="mr10" v-model="passwordInput" password placeholder="请输入密码"></fx-input>
      <template #hide>
        <pre v-highlight="password"><code class="vue"></code></pre>
      </template>
    </fx-card>
    <fx-card title="带输入建议">
      <fx-autocomplete class="mr10" v-model="searchInput" placeholder="请输入密码" clear
                       :fetch="querySearch"></fx-autocomplete>
      <template #hide>
        <pre v-highlight="search"><code class="vue"></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义搜索模板/自定义选择Key">
      <fx-autocomplete class="mr10" v-model="searchInput2" placeholder="请输入密码" clear :fetch="querySearch2"
                       searchKey="role">
        <template v-slot="{item}">
          <fx-link type="primary">{{ item.role }}</fx-link>
          <em class="ml5 mr5">-</em>
          <span>{{ item.value }}</span>
        </template>
      </fx-autocomplete>
      <template #hide>
        <pre v-highlight="search2"><code class="vue"></code></pre>
      </template>
    </fx-card>
    <fx-card title="带icon的输入框">
      <div class="type mb10">
        <span>属性方式:</span>
        <fx-input class="mr10" v-model="suffixInput" placeholder="请输入内容" suffix-icon="icon-search"></fx-input>
        <fx-input class="mr10" v-model="prefixInput" placeholder="请输入内容" prefix-icon="icon-search"></fx-input>
      </div>
      <div class="slot">
        <span>插槽方式:</span>
        <fx-input class="mr10" v-model="suffixInput" placeholder="请输入内容">
          <template #suffix>
            <i class="iconfont icon-search"></i>
          </template>
        </fx-input>
        <fx-input class="mr10" v-model="prefixInput" placeholder="请输入内容">
          <template #prefix>
            <i class="iconfont icon-search"></i>
          </template>
        </fx-input>
      </div>
      <template #hide>
        <pre v-highlight="icon"><code class="vue"></code></pre>
      </template>
    </fx-card>
    <fx-card title="大小">
      <fx-input class="mr10" v-model="sizeInput" size="large" placeholder="请输入内容"></fx-input>
      <fx-input class="mr10" v-model="sizeInput" size="middle" placeholder="请输入内容"></fx-input>
      <fx-input class="mr10" v-model="sizeInput" size="default" placeholder="请输入内容"></fx-input>
      <fx-input class="mr10" v-model="sizeInput" size="mini" placeholder="请输入内容"></fx-input>
      <template #hide>
        <pre v-highlight="size"><code class="vue"></code></pre>
      </template>
    </fx-card>
    <fx-card title="文本域">
      <fx-input class="mr10" v-model="textareaInput" type="textarea" placeholder="请输入内容"></fx-input>
      <template #hide>
        <pre v-highlight="textarea"><code class="vue"></code></pre>
      </template>
    </fx-card>
    <fx-card title="API 属性">
      <fx-table :data="inputApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
    <fx-card title="API 方法">
      <fx-table :data="inputMethod">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="callback" label="回调参数"></fx-table-item>
      </fx-table>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { defaultList } from '@/assets/menuList'

const inputApi = [
  { name: 'modelValue / v-model', directions: '绑定值', type: 'String' },
  { name: 'type', directions: '类型', type: 'String', value: '原生input type值', default: 'text' },
  { name: 'size', directions: '大小尺寸', type: 'String', value: 'large | middle | default | mini', default: 'default' },
  { name: 'prefixIcon', directions: '左侧图标', type: 'String' },
  { name: 'suffixIcon', directions: '右侧图标', type: 'String' },
  { name: 'clear', directions: '是否显示清空按钮', type: 'Boolean', default: 'false' },
  { name: 'password', directions: '是否需要显示密码功能（仅 type = "password" 有效）', type: 'Boolean', default: 'false' },
  { name: 'round', directions: '是否圆角', type: 'Boolean', default: 'false' },
  { name: 'autoFocus', directions: '是否自动聚焦', type: 'Boolean', default: 'false' },
  { name: 'debounce', directions: '防抖动时间设置', type: 'Number', default: 0 },
  { name: 'length', directions: '输入长度限制', type: 'Number', default: 0 }
]

const inputMethod = [
  { name: 'input', directions: 'input 值发生改变时触发', callback: '当前input值' },
  { name: 'blur', directions: 'input 失焦时触发', callback: '当前input值' },
  { name: 'focus', directions: 'input 聚焦触发', callback: '当前input值' }
]

const baseInput = ref<string>('')
const debounce = ref<number>(0)
const lengthInput = ref<string>('')
const disabledInput = ref<string>('')
const clearInput = ref<string>('')
const roundInput = ref<string>('')
const passwordInput = ref<string>('')
const searchInput = ref<string>('')
const searchInput2 = ref<string>('')
const suffixInput = ref<string>('')
const prefixInput = ref<string>('')
const textareaInput = ref<string>('')
const sizeInput = ref<string>('')

const base = `<fx-input class="mr10" v-model="baseInput" placeholder="请输入内容" :debounce="debounce*1000"/>
防抖延时：
<fx-input-number v-model="debounce" :min="0" :max="5" width="120"/>
秒后触发
<p class="text_hide mt10">当前输入: {{ baseInput }}</p>`
const disabled = '<fx-input class="mr10" v-model="disabledInput" disabled placeholder="请输入内容"></fx-input>'
const length = '<fx-input class="mr10" v-model="lengthInput" :length="10" placeholder="请输入内容"></fx-input>'
const clear = '<fx-input class="mr10" v-model="clearInput" clear placeholder="请输入内容"></fx-input>'
const round = '<fx-input class="mr10" v-model="roundInput" round placeholder="请输入内容"></fx-input>'
const password = '<fx-input class="mr10" v-model="passwordInput" password placeholder="请输入内容"></fx-input>'
const search = `<fx-autocomplete class="mr10" v-model="searchInput" placeholder="请输入密码" clear :fetch="querySearch"></fx-autocomplete>

export default defineComponent({
    setup() {
        const querySearch = (searchText: string, cb: (val: { value: string, role: string }[]) => void) => {
          const restaurants = [
            { value: '蒙奇·D·路飞', role: '船长' },
            { value: '罗罗诺亚·索隆', role: '剑士' },
            { value: '文斯莫克·山治', role: '厨师' },
            { value: '托尼托尼·乔巴', role: '医生' },
            { value: '娜美', role: '航海士' },
            { value: '乌索普', role: '狙击手' },
            { value: '妮可·罗宾', role: '考古学家' },
            { value: '弗兰奇', role: '船匠' },
            { value: '布鲁克', role: '音乐家' },
            { value: '甚平', role: '舵手' }
          ]
          const results = searchText ? restaurants.filter((item: { value: string, role: string }) => {
            return item.value.match(searchText)
          }) : restaurants
          cb(results)
      }
    }
})`
const search2 = `<fx-autocomplete class="mr10" v-model="searchInput2" placeholder="请输入密码" clear :fetch="querySearch" searchKey="role">
  <template v-slot="{item}">
    <fx-link type="primary">{{ item.role }}</fx-link>
    <em class="ml5 mr5">-</em>
    <span>{{ item.value }}</span>
  </template>
</fx-autocomplete>

export default defineComponent({
    setup() {
        const querySearch = (searchText: string, cb: (val: { value: string, role: string }[]) => void) => {
          const restaurants = [
            { value: '蒙奇·D·路飞', role: '船长' },
            { value: '罗罗诺亚·索隆', role: '剑士' },
            { value: '文斯莫克·山治', role: '厨师' },
            { value: '托尼托尼·乔巴', role: '医生' },
            { value: '娜美', role: '航海士' },
            { value: '乌索普', role: '狙击手' },
            { value: '妮可·罗宾', role: '考古学家' },
            { value: '弗兰奇', role: '船匠' },
            { value: '布鲁克', role: '音乐家' },
            { value: '甚平', role: '舵手' }
          ]
          const results = searchText ? restaurants.filter((item: { value: string, role: string }) => {
            return item.role.match(searchText)
          }) : restaurants
          cb(results)
      }
    }
})`
const icon = `<div class="type mb10">
  <span>属性方式:</span>
  <fx-input class="mr10" v-model="suffixInput" placeholder="请输入内容" suffix-icon="icon-search"></fx-input>
  <fx-input class="mr10" v-model="prefixInput" placeholder="请输入内容" prefix-icon="icon-search"></fx-input>
</div>
<div class="slot">
  <span>插槽方式:</span>
  <fx-input class="mr10" v-model="suffixInput" placeholder="请输入内容">
    <template #suffix>
      <i class="iconfont icon-search"></i>
    </template>
  </fx-input>
  <fx-input class="mr10" v-model="prefixInput" placeholder="请输入内容">
    <template #prefix>
      <i class="iconfont icon-search"></i>
    </template>
  </fx-input>
</div>`
const size = `<fx-input class="mr10" v-model="sizeInput" size="large" placeholder="请输入内容"></fx-input>
<fx-input class="mr10" v-model="sizeInput" size="middle" placeholder="请输入内容"></fx-input>
<fx-input class="mr10" v-model="sizeInput" size="default" placeholder="请输入内容"></fx-input>
<fx-input class="mr10" v-model="sizeInput" size="mini" placeholder="请输入内容"></fx-input>`
const textarea = '<fx-input class="mr10" v-model="textareaInput" type="textarea" placeholder="请输入内容"></fx-input>'

const querySearch = (searchText: string, cb: (val: { value: string, role: string }[]) => void) => {
  const results = searchText ? defaultList.filter((item: { value: string, role: string }) => {
    return item.value.match(searchText)
  }) : defaultList
  cb(results)
}

const querySearch2 = (searchText: string, cb: (val: { value: string, role: string }[]) => void) => {
  const results = searchText ? defaultList.filter((item: { value: string, role: string }) => {
    return item.role.match(searchText)
  }) : defaultList
  cb(results)
}
</script>

<style scoped lang="scss">
.input {
}
</style>
